<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>详情</title>
    <link rel="stylesheet" href="/layui/layui.css">
    <link rel="stylesheet" href="/css/bootstrap.css">
    <script src="/js/jquery.js"></script>
    <script src="/js/bootstrap.js"></script>
    <link rel="stylesheet" href="/css/details.css">
    <link rel="stylesheet" href="//at.alicdn.com/t/font_848666_pri5cwk3xde.css"/>
    <style>
        .carousel-inner > .item > img {
            position: absolute;
            top: 0;
            left: 0;
            min-width: 100%;
            height: 500px;
        }
        .top-buffer{
            margin-top: 40px;
        }
        .top-buffer3{
            margin-top: 80px;
        }
    </style>
</head>
<body>
<div class="details-head">
    <!-- title -->
    <div class="title-wrapper">
        <div class="left-con">
            <h2 class="house-title" th:text="${session.Onehouse.housedescription}"></h2>
            <p class="tags">
                <span>户型方正，采光好，格局好。</span>
            </p>
        </div>
    </div>
</div>
<div class="container">
    <div class="row">
<div id="carouselExampleControls" class="carousel slide col-md-7"  data-bs-ride="carousel">
    <div class="carousel-inner" >
        <div class="carousel-item" th:each="image,stat : ${session.houseimage}" th:classappend="${stat.index == 0}? 'active'">
            <img th:src="|/${image}|" class="img-thumbnail d-block w-100" alt="...">
        </div>
    </div>
    <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleControls" data-bs-slide="prev">
        <span class="carousel-control-prev-icon" aria-hidden="true"></span>
        <span class="visually-hidden">Previous</span>
    </button>
    <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleControls" data-bs-slide="next">
        <span class="carousel-control-next-icon" aria-hidden="true"></span>
        <span class="visually-hidden">Next</span>
    </button>
</div>
        <div class="col-md-4">
    <div class="details-info">
        <div class="show-price">
            <span class="sale-price" th:text="${session.Onehouse.houseprice}"></span>
            <span class="sale-unit">元/月</span>
            <span class="area" th:text="${session.Onehouse.housetype}"> 押一付三</span>
        </div>
        <hr>
        <div class="show-house-name">
            <p><span class="field">小区名称：</span><span class="name" th:text="${session.Onehouse.housename}"></span></p>
            <p><span class="field">小区地址：</span><span class="name" th:text="${session.Onehouse.houseaddress}"></span></p>
            <p><span class="field">周边学校：</span><span class="name" >请联系我咯</span></p>
            <p><span class="field">房屋大小：</span><span class="name" th:text="${session.Onehouse.housesize}"></span></p>
            <p><span class="field">房屋年龄：</span><span class="name" th:text="${session.Onehouse.houseage}"></span></p>
            <p><span class="field">联系电话：</span><span class="name" th:text="${session.houseOwner.usertel}"></span></p>
            <p><span class="field">邮箱：</span> <span class="name" th:text="${session.houseOwner.useremail}"></span>

            <!--
                        <span class="name" th:text="${session.houseOwner.useremail}"></span>
               </p>
            <!--
                        <p><span class="field">房屋年龄：</span><span class="name" th:text="${session.user.userid}"></span></p>
            -->

        </div>
            <div class="btn top-buffer">
                <a class="btn btn-primary btn-lg" href="#" onclick="OrderInfo('/order/getHouseOrder')">合租</a>
                <a class="btn btn-success btn-lg" id="collectHouse" onclick="collectHouse()" th:text="${session.collected}">收藏</a>
                <a class="btn btn-danger btn-lg" href="#" onclick="loadAccuse('/accuse/toAddFromHouse')">举报</a>
                <a class="btn btn-info btn-lg top-buffer" style="color: white" href="#" onclick="OrderInfo('/order/toAddOrder')">发起合租请求</a>
            </div>
    </div><!--href="/accuse/toAddFromHouse"-->
        </div>
</div>
    <div class="row">
        <div class="col-md-7">
    <div class="anchor-title">
        <h3>房屋配置</h3>
    </div>
    <div class="household-appliances">
        <ul>
            <li>
                <i class="iconfont icon-chuang"></i>
                <span>床</span>
            </li>
            <li>
                <i class="iconfont icon-kongtiao"></i>
                <span>空调</span>
            </li>
            <li>
                <i class="iconfont icon-yigui"></i>
                <span>衣柜</span>
            </li>
            <li>
                <i class="iconfont icon-iconyihuifu-"></i>
                <span>桌椅</span>
            </li>
            <li>
                <i class="iconfont icon-xiyiji"></i>
                <span>洗衣机</span>
            </li>
            <li>
                <i class="iconfont icon-shafa"></i>
                <span>沙发</span>
            </li>
            <li>
                <i class="iconfont icon-xiaodugui"></i>
                <span>消毒柜</span>
            </li>
            <li>
                <i class="iconfont icon-weibolu"></i>
                <span>微波炉</span>
            </li>
            <li>
                <i class="iconfont icon-chouyouyanji"></i>
                <span>抽油烟机</span>
            </li>
            <li>
                <i class="iconfont icon-dianshi"></i>
                <span>电视</span>
            </li>
            <li>
                <i class="iconfont icon-meiqitianranqi"></i>
                <span>天然气</span>
            </li>
            <li>
                <i class="iconfont icon-kuandai"></i>
                <span>宽带</span>
            </li>
            <li>
                <i class="iconfont icon-reshuiqianzhuang"></i>
                <span>热水器</span>
            </li>
            <li>
                <i class="iconfont icon-bingxiang"></i>
                <span>冰箱</span>
            </li>
        </ul>
    </div>
</div>
    <div id="orderInfo" class="col-md-5 top-buffer1">

    </div>
</div>
    <div class="row" id="houseCommentInfo">

    </div>
</div>
<!--<div style="background-color: blue">
    <p th:text="${orderpage.getList().get(0).orderdescription}"></p>
</div>-->

</body>
<script>
    function loadAccuse(url) {
        $.ajax({
            url: url,
            type: 'GET',
            async: true,
            dataType: "html",
            contentType: 'application/json; charset=utf-8',
            success: function (html) {
                $('#allItems').html(html);
            },
            error: function (xhr,data) {
                var judge=xhr.getResponseHeader('RED');
                if(judge=='RED') {
                    alert("请先登录！！")
                    var w=window;
                    w.location.href='/user/loginPage.html';
                }
                else{
                    alert("请求错误！！");
                }
            }
        })
    }
        function collectHouse(url) {
            var collect = document.getElementById("collectHouse");
            var check = collect.innerText;
            if (check == "收藏") {
                $.ajax({
                    url: "/collection/addHouseCollection",
                    type: 'POST',
                    success: function () {
                        var a = document.getElementById("collectHouse");
                        a.innerText = "已收藏";
                    },
                    error: function (xhr,data) {
                        var judge=xhr.getResponseHeader('RED');
                        if(judge=='RED') {
                            alert("请先登录！！")
                            var w=window;
                            w.location.href='/user/loginPage.html';
                        }
                        else{
                            alert("请求错误！！");
                        }
                    }
                })
            } else if (check == "已收藏") {
                $.ajax({
                    url: "/collection/removeHouseCollection",
                    type: 'POST',
                    success: function () {
                        var b = document.getElementById("collectHouse");
                        b.innerText = "收藏";
                    }
                })
            }
        }
        function OrderInfo(url) {
             $.ajax({
                 url:url,
                 type:'GET',
                 async:true,
                 dataType: "html",
                 contentType: 'application/json; charset=utf-8',
                 success:function (html){
                     $('#orderInfo').html(html);
                 },
                 error: function (xhr,data) {
                     var judge=xhr.getResponseHeader('RED');
                     if(judge=='RED') {
                         alert("请先登录！！")
                         var w=window;
                         w.location.href='/user/loginPage.html';
                     }
                     else{
                         alert("请求错误！！");
                     }
                 }
             })
        }
    function loadNewPage(url,a) {
        $.ajax({
            url: url,
            type: 'GET',
            data:{"pageNo":a},
            success:function (data) {
                $('#orderInfo').html(data);
            },
            error: function () {
                alert("请求错误！！");
            }
        })
    }
    function loadComments() {
        $.ajax({
            url:'/comment/getHouseComments',
            type:'GET',
            async:true,
            dataType: "html",
            contentType: 'application/json; charset=utf-8',
            success:function (html) {
                $('#houseCommentInfo').html(html);
            }
        })
    }
</script>
</html>
